<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.12.4.js">
			
		</script>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.div1,.div2{
				width: 100px;
				height: 100px;
				background: pink;
				border: 1px solid saddlebrown;
				margin: 0px 0px 5px 0px;
			}
			.div2{
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="div1"><p>div1</p></div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
		用户名：<input type="text" name="name" /><br />
		<textarea name="" rows="" cols="" id="te"></textarea><br />
		<button onclick="test()">获取</button>
		<script type="text/javascript">
			//获取textares的值（values）
			var b=$("#te").val()
			//获取input的值（values）
			var b=$("input").val()
			$(function(){
				$("#div1").addClass("div1")
				$("#div1").css("color","red")
				//获取#div1的颜色：string返回值
				var a= $("#div1").css("color")
			})
			$("#div1").click(function(){
				//next()下一个
				//$("#div2").next().addClass("div2")
				$("#div2").addClass("div2")
			})
			$("#div2").click(function(){
				$(this).removeClass("div2")
			})
			$("#div3").click(function(){
				//#div3是否有.div2样式
				var f=$(this).hasClass("div2")
				$(this).toggleClass("div2")
			})
			//获取div1内容
			var a= $("#div1").html() //<p>div1</p>
			var a= $("#div1").text() //div1
			//替换div1的值
			$("#div1").html("<span>span元素</span>")
			$("#div1").text("<span>span元素</span>")
			//设置值
			$("input").val("张三")
			//获取值
			var a= $("input").val()
			document.write("<br/>表单中的值:"+a)
			//////创建节点
			//创建标签
			var $a=$("<a href='../chop1/index1.html'>这是一个超链接</a>");
			//获取div3
			var div3=$("#div3");
			//////append：插入的div3的后面
			//第一种方法
			//div3.append($a);
			//第二种方法
			//$("#div3").append("<a href='../chop1/index1.html'>这是一个超链接</a>")
			//////prepend：插入的div3的前面
			//div3.prepend($a)
			//$a.prependTo(div3)
			//////before：插入的div3的上面
			//div3.before($a)			
			//////after：插入的div3的下面
			//div3.after($a)
		</script>
	</body>
</html>
